/**
 * useState使用案例
 */
import React, { useState } from 'react';
import styled from 'styled-components';

function Counter(props) {
  const [count, setCount] = useState(0);

  return (
    <CounterContainer>
      <p className="count-text">计数器：{count}</p>
      <button className="change-btn" onClick={() => setCount(count - 1)}>
        -
      </button>
      <button className="change-btn" onClick={() => setCount(count + 1)}>
        +
      </button>
    </CounterContainer>
  );
}

const CounterContainer = styled.div`
  padding: 20px;
  border: 1px solid #eee;
  .count-text {
    padding-bottom: 5px;
  }
  .change-btn {
    padding: 8px 10px;
    margin-right: 15px;
  }
`;

export default Counter;
